<template>
  <div class="table2 flex-col h-full overflow-hidden m-m">
    <div class="pb-14">
      <MsSectioner ref="MsSectionerRef" :values="menuList" :height="30" @click="tabChange" />
    </div>
    <div class="flex-1 w-full color-bg-1">
      <section class="box-full overflow-hidden box-border">
        <transition name="fade-slide" mode="out-in" appear>
          <keep-alive>
            <component :is="menuList[selectedKey].value" @changeTab="changeTab"></component>
          </keep-alive>
        </transition>
      </section>
    </div>
  </div>
</template>
<script setup>
import Jxddb from './jxddb/index.vue'
import Tb88vip from './tb88vip/index.vue'
import Zstdjl from './zstdjl/index.vue'
import Zldbzsj from './zldbzsj/index.vue'
import JDSuperSubsidy from './jdSuperSubsidy/index.vue'
import Pdddhpws from './pdddhpws/index.vue'
import Mtddb from './mtddb/index.vue'
import Chsm from './chsm/index.vue'
import Chcj from './chcj/index.vue'
import Other from './other/index.vue'

defineOptions({ name: 'appActSettle' })

const selectedKey = ref(0)
const MsSectionerRef = ref()
const menuList = ref([
  { name: '超红抽奖', value: markRaw(Chcj) },
  { name: '超红赛马', value: markRaw(Chsm) },
  { name: '京喜单单补', value: markRaw(Jxddb) },
  { name: '淘宝88vip', value: markRaw(Tb88vip) },
  { name: '买手专属推单奖励', value: markRaw(Zstdjl) },
  { name: '助力大班长升级', value: markRaw(Zldbzsj) },
  { name: '美团单单补', value: markRaw(Mtddb) },
  { name: '京东超级补贴', value: markRaw(JDSuperSubsidy) },
  { name: '拼多多带货排位赛', value: markRaw(Pdddhpws) },
  { name: '其他', value: markRaw(Other) }
])

// '3' => 171, // 淘宝超级U选千万补贴
// '1' => 172, // 京东补贴
// '2' => 173, // 淘宝超级赚钱周
// '4' => 174, // 拼多多带货挑战赛(排位)
// '5' => 175, // 拼多多收益翻倍周
// '6' => 176, // 买手发超红抽奖
// '7' => 177, // 买手超红赛马
// '8' => 178, // 美团单单补
// '9' => 179, // 大班长助理升级
// '10' => 180, // 88VIP
// '11' => 181, // 推单奖励
// '12' => 182, // 京喜单单补
// '13' => 182, // 其他

const tabChange = (val) => {
  selectedKey.value = val.index
}

const changeTab = (val) => {
  MsSectionerRef.value?.handleClick(val.tab)
}
</script>
<style lang="scss" scoped>
.color-bg-1 {
  background: var(--color-bg-1);
}
.center-tab {
  border-left: 1px solid rgb(var(--primary-6));
  border-right: 1px solid rgb(var(--primary-6));
}
</style>
